<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('动态更新主轴震动列表')" />
    <th:block th:include="include :: footer" />
</head>
<style>
    .box{
        width: 1100px;
        height: 430px;
        background-color: aquamarine;
    }
</style>
<body>
<div class="col-sm-12 search-collapse">
    <form id="formId" method="get">
        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;传感器：</label>
        <select name="axisSpace" style="width: 130px" >
            <option value="">所有</option>
            <option value="传感器A">传感器A</option>
            <option value="传感器B">传感器B</option>
        </select>
        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;查询条件：</label>
        <select name="axisType"  style="width: 160px"  >
            <option value="">通频有效值/加速度</option>
            <option value="型号1">通频有效值/速度</option>
            <option value="型号2">通频有效值/位移</option>
            <option value="型号3">低频有效值/加速度</option>
            <option value="型号4">低频有效值/速度</option>
            <option value="型号4">低频有效值/位移</option>
            <option value="型号4">普频有效值/加速度</option>
            <option value="型号4">普频有效值/速度</option>
            <option value="型号4">普频有效值/位移</option>
        </select>
        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日期范围：</label>
        <input type="text" name="startEndTime" id="startEndTime" class="layui-input" placeholder="年-月-日" style="width: 230px;display: inline">
        <button type="reset" class="pear-btn pear-btn-md timeInput">
            <i class="layui-icon layui-icon-refresh"></i>重置
        </button>
    </form>
</div>
<div class="box"></div>
<script>
    window.onload=function (){
        getAxisID();
    };
    //获得cookie的axisID(失败)
    function getAxisID() {
        axisId=localStorage.getItem("axisId");
        if(axisId==null){
            axisId=1;
        }
        console.log(axisId);
    }
    //使用layui日期控件
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startEndTime',
            theme: 'molv',
            range: true
        });
    });


    //初始化echarts实例对象 echarts.init(dom容器)
    var myEchart = echarts.init(document.querySelector('.box'));

    //指定配置项和数据
    // var app={};
    var shakeA;
    // var humidity;
    var shakeB;
    option = {
        title: {
            text: '主轴震动趋势图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {
            data:['传感器A','传感器B']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 50
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: (function (){
                    var now = new Date();
                    var res = [];
                    var len = 20;
                    while (len--) {
                        res.unshift(now.toLocaleTimeString());
                        now = new Date(now - 1000);
                    }
                    return res;
                })()
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '振动幅度',
                max: 10,
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name:'传感器A',
                type:'line',
                data:(function (){
                    var res = [];
                    var len = 0;
                    while (len < 12) {
                        res.push(shakeA);
                        len++;
                    }
                    return res;
                })()
            },
            {
                name:'传感器B',
                type:'line',
                data:(function (){
                    var res = [];
                    var len = 0;
                    while (len < 12) {
                        res.push(shakeB);
                        len++;
                    }
                    return res;
                })()
            }

        ],
        id:0
    };

    // app.count = 10;
    setInterval(function (){
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        $.ajax({    //使用JQuery内置的Ajax方法
            type : "get",        //post请求方式
            async : true,        //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/system/axisShake/getData",    //请求发送到ShowInfoIndexServlet处
            data:'id='+axisId,
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                shakeA=result.shakeA;
                option.id=result.id;
            }
        });
        // var data0 = option.series[0].data;
        var data1 = option.series[0].data;
        // data0.shift();
        // // data0.push(humidity);
        data1.shift();
        data1.push(shakeA);
        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        // option.xAxis[1].data.shift();
        // option.xAxis[1].data.push(app.count++);
        myEchart.setOption(option);

    }, 1000);

</script>

</body>
</html>